<!--
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-11-29 09:50:03
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-01-23 18:07:22
 * @FilePath: \partal\src\views\develop\components\ThemePc.vue
 * @Description: 定制主题-PC端
-->

<script lang="ts" setup>
  /**
   * 路由跳转：MDN-使用 CSS 自定义属性（变量）
   */
  const goCssVars = () => window.open('https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties')
</script>

<template>
  <div class="pc">
    <p class="p14">SSC+ Design Web</p>
    <p class="p36 mt18">定制主题</p>
    <p class="p14 mt12">SSC+ DESIGN Web 支持灵活的样式定制，满足多种视觉业务和品牌需求，包括但不限于全局主色调和特定组件视觉定制的支持。</p>
    <p class="p14 mt12">在 SSC+ DESIGN Web 的 1.0 版本中，我们推荐使用 CSS 变量， 无需引入额外的 LESS 样式文件，就可以使用到新的主题定制功能。</p>

    <p class="split mt38" />

    <p class="p24 mt46">使用 CSS Variables 进行主题配置</p>
    <p class="p14 mt18">SSC+ DESIGN Web 组件可以通过 <span class="blue" @click="goCssVars()">CSS Vars</span> 来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等功能。</p>
    <p class="p14 mt18">我们推荐使用替换 <span class="blue" @click="goCssVars()">CSS Vars</span> 的方式来进行个性化的主题配置。</p>

    <p class="split mt38" />
    
    <p class="p24 mt46">内置 CSS Variables 一览</p>
    <pre class="code mt18">
:root {
  /** 主色-点击 */
  --sscd-primary-click-color: var(--sscd-blue-7);
  /** 主色-常规 */
  --sscd-primary-color: var(--sscd-blue-6);
  /** 主色-悬浮 */
  --sscd-primary-hover-color: var(--sscd-blue-5);
  /** 主色-特殊场景 */
  --sscd-primary-special-color: var(--sscd-blue-4);
  /** 主色-禁用 */
  --sscd-primary-disabled-color: var(--sscd-blue-3);
  /** 主色-文字禁用 */
  --sscd-primary-text-disabled-color: var(--sscd-blue-2);
  /** 主色-浅色背景 */
  --sscd-primary-light-color: var(--sscd-blue-1);
}

:root {
  /** 线条-分割线 */
  --sscd-line-split-color: var(--sscd-gray-4);
  /** 线条-边框 */
  --sscd-line-border-color: var(--sscd-gray-5);
}

:root {
  /** 填充-浅色背景 */
  --sscd-fill-light-color: #f0f2f5;
  /** 填充-常规/表头/白底悬浮 */
  --sscd-fill-regular-color: var(--sscd-gray-2);
  /** 填充-禁用 */
  --sscd-fill-disabled-color: var(--sscd-gray-3);
  /** 填充-图标 */
  --sscd-fill-icon-color: var(--sscd-gray-8);
}

:root {
  /** 文字-强调/正文标题 */
  --sscd-text-color: var(--sscd-gray-9);
  /** 文字-次强调/正文标题 */
  --sscd-text-sencondary-color: var(--sscd-gray-8);
  /** 文字-次要信息 */
  --sscd-text-info-color: var(--sscd-gray-7);
  /** 文字-置灰信息 */
  --sscd-text-gray-color: var(--sscd-gray-6);
}

:root {
  /** 成功-点击 */
  --sscd-success-click-color: var(--sscd-green-7);
  /** 成功-常规 */
  --sscd-success-color: var(--sscd-green-6);
  /** 成功-悬浮 */
  --sscd-success-hover-color: var(--sscd-green-5);
  /** 成功-特殊场景 */
  --sscd-success-special-color: var(--sscd-green-4);
  /** 成功-禁用 */
  --sscd-success-disabled-color: var(--sscd-green-3);
  /** 成功-文字禁用 */
  --sscd-success-text-disabled-color: var(--sscd-green-2);
  /** 成功-浅色背景 */
  --sscd-success-light-color: var(--sscd-green-1);
}

:root {
  /** 警告/提醒-点击 */
  --sscd-warning-click-color: var(--sscd-gold-7);
  /** 警告/提醒-常规 */
  --sscd-warning-color: var(--sscd-gold-6);
  /** 警告/提醒-悬浮 */
  --sscd-warning-hover-color: var(--sscd-gold-5);
  /** 警告/提醒-特殊场景 */
  --sscd-warning-special-color: var(--sscd-gold-4);
  /** 警告/提醒-禁用 */
  --sscd-warning-disabled-color: var(--sscd-gold-3);
  /** 警告/提醒-文字禁用 */
  --sscd-warning-text-disabled-color: var(--sscd-gold-2);
  /** 警告/提醒-浅色背景 */
  --sscd-warning-light-color: var(--sscd-gold-1);
}

:root {
  /** 错误-点击 */
  --sscd-danger-click-color: var(--sscd-red-7);
  /** 错误-常规 */
  --sscd-danger-color: var(--sscd-red-6);
  /** 错误-悬浮 */
  --sscd-danger-hover-color: var(--sscd-red-5);
  /** 错误-特殊场景 */
  --sscd-danger-special-color: var(--sscd-red-4);
  /** 错误-禁用 */
  --sscd-danger-disabled-color: var(--sscd-red-3);
  /** 错误-文字禁用 */
  --sscd-danger-text-disabled-color: var(--sscd-red-2);
  /** 错误-浅色背景 */
  --sscd-danger-light-color: var(--sscd-red-1);
}

:root {
  /** 链接-点击 */
  --sscd-link-click-color: var(--sscd-blue-7);
  /** 链接-常规 */
  --sscd-link-color: var(--sscd-blue-6);
  /** 链接-悬浮 */
  --sscd-link-hover-color: var(--sscd-blue-5);
  /** 链接-特殊场景 */
  --sscd-link-special-color: var(--sscd-blue-4);
  /** 链接-禁用 */
  --sscd-link-disabled-color: var(--sscd-blue-3);
  /** 链接-文字禁用 */
  --sscd-link-text-disabled-color: var(--sscd-blue-2);
  /** 链接-浅色背景 */
  --sscd-link-light-color: var(--sscd-blue-1);
}

:root {
  /** 遮罩底色 */
  --sscd-shade-color: rgba(0, 0, 0, 0.45);
  /** 遮罩底色（深色） */
  --sscd-shade-dark-color: rgba(0, 0, 0, 0.9);
  /** 遮罩底色（消失） */
  --sscd-shade-none-color: rgba(0, 0, 0, 0);
}

:root {
  /** 字体 */
  --sscd-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

:root {
  /** 字号-辅助文 */
  --sscd-help-font-size: 12px;
  /** 字号-正文 */
  --sscd-font-size: 14px;
  /** 字号-标题-小 */
  --sscd-title-small-font-size: 16px;
  /** 字号-标题-中 */
  --sscd-title-medium-font-size: 20px;
  /** 字号-标题-大 */
  --sscd-title-large-font-size: 24px;
  /** 字号-运营标题-小 */
  --sscd-operate-small-font-size: 36px;
  /** 字号-运营标题-中 */
  --sscd-operate-medium-font-size: 48px;
  /** 字号-运营标题-大 */
  --sscd-operate-large-font-size: 56px;
}

:root {
  /** 行高-辅助文 */
  --sscd-help-line-height: 20px;
  /** 行高-正文 */
  --sscd-line-height: 22px;
  /** 行高-标题-小 */
  --sscd-title-small-line-height: 24px;
  /** 行高-标题-中 */
  --sscd-title-medium-line-height: 28px;
  /** 行高-标题-大 */
  --sscd-title-large-line-height: 32px;
  /** 行高-运营标题-小 */
  --sscd-operate-small-line-height: 44px;
  /** 行高-运营标题-中 */
  --sscd-operate-medium-line-height: 56px;
  /** 行高-运营标题-大 */
  --sscd-operate-large-line-height: 64px;
}

:root {
  /** 字重-light */
  --sscd-light-font-weight: 300;
  /** 字重-regular */
  --sscd-regular-font-weight: 400;
  /** 字重-medium */
  --sscd-medium-font-weight: 500;
  /** 字重-semibold */
  --sscd-semibold-font-weight: 600;
}

:root {
  /** 阴影-一级 */
  --sscd-shadow-first: 0px 1px 2px -2px rgba(0, 0, 0, 0.16);
  /** 阴影-二级 */
  --sscd-shadow-second: 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
  /** 阴影-三级 */
  --sscd-shadow-third: 0px 6px 16px -8px rgba(0, 0, 0, 0.08);
}

:root {
  /** 白色 */
  --sscd-white-color: var(--sscd-gray-1);
}
    </pre>

    <p class="split mt38" />
    
    <p class="p24 mt46">13套基础色板 CSS Variables 一览</p>
    <pre class="code mt18">
/** 薄暮/斗志、奔放 */
:root {
  --sscd-red-1: #fff1f0;
  --sscd-red-2: #ffccc7;
  --sscd-red-3: #ffa39e;
  --sscd-red-4: #ff7875;
  --sscd-red-5: #ff4d4f;
  --sscd-red-6: #f5222d;
  --sscd-red-7: #cf1322;
  --sscd-red-8: #a8071a;
  --sscd-red-9: #820014;
  --sscd-red-10: #5c0011;
}

/** 火山/醒目、澎湃 */
:root {
  --sscd-volcano-1: #fff2e8;
  --sscd-volcano-2: #ffd8bf;
  --sscd-volcano-3: #ffbb96;
  --sscd-volcano-4: #ff9c6e;
  --sscd-volcano-5: #ff7a45;
  --sscd-volcano-6: #fa541c;
  --sscd-volcano-7: #d4380d;
  --sscd-volcano-8: #ad2102;
  --sscd-volcano-9: #871400;
  --sscd-volcano-10: #610b00;
}

/** 日暮/温暖、欢快 */
:root {
  --sscd-orange-1: #fff7e6;
  --sscd-orange-2: #ffe7ba;
  --sscd-orange-3: #ffd591;
  --sscd-orange-4: #ffc069;
  --sscd-orange-5: #ffa940;
  --sscd-orange-6: #fa8c16;
  --sscd-orange-7: #d46b08;
  --sscd-orange-8: #ad4e00;
  --sscd-orange-9: #873800;
  --sscd-orange-10: #612500;
}

/** 金盏花/活力、积极 */
:root {
  --sscd-gold-1: #fffbe6;
  --sscd-gold-2: #fff1b8;
  --sscd-gold-3: #ffe58f;
  --sscd-gold-4: #ffd666;
  --sscd-gold-5: #ffc53d;
  --sscd-gold-6: #faad14;
  --sscd-gold-7: #d48806;
  --sscd-gold-8: #ad6800;
  --sscd-gold-9: #874d00;
  --sscd-gold-10: #613400;
}

/** 日出/出生、阳光 */
:root {
  --sscd-yellow-1: #feffe6;
  --sscd-yellow-2: #ffffb8;
  --sscd-yellow-3: #fffb8f;
  --sscd-yellow-4: #fff566;
  --sscd-yellow-5: #ffec3d;
  --sscd-yellow-6: #fadb14;
  --sscd-yellow-7: #d4b106;
  --sscd-yellow-8: #ad8b00;
  --sscd-yellow-9: #876800;
  --sscd-yellow-10: #614700;
}

/** 青柠/自然、生机 */
:root {
  --sscd-lime-1: #fcffe6;
  --sscd-lime-2: #f4ffb8;
  --sscd-lime-3: #eaff8f;
  --sscd-lime-4: #d3f261;
  --sscd-lime-5: #bae637;
  --sscd-lime-6: #a0d911;
  --sscd-lime-7: #7cb305;
  --sscd-lime-8: #5b8c00;
  --sscd-lime-9: #3f6600;
  --sscd-lime-10: #254000;
}

/** 极光绿/健康、创新 */
:root {
  --sscd-green-1: #f6ffed;
  --sscd-green-2: #d9f7be;
  --sscd-green-3: #b7eb8f;
  --sscd-green-4: #95de64;
  --sscd-green-5: #73d13d;
  --sscd-green-6: #52c41a;
  --sscd-green-7: #389e0d;
  --sscd-green-8: #237804;
  --sscd-green-9: #135200;
  --sscd-green-10: #092b00;
}

/** 明青/希望、坚强 */
:root {
  --sscd-cyan-1: #e6fffb;
  --sscd-cyan-2: #b5f5ec;
  --sscd-cyan-3: #87e8de;
  --sscd-cyan-4: #5cdbd3;
  --sscd-cyan-5: #36cfc9;
  --sscd-cyan-6: #13c2c2;
  --sscd-cyan-7: #08979c;
  --sscd-cyan-8: #006d75;
  --sscd-cyan-9: #00474f;
  --sscd-cyan-10: #002329;
}

/** 拂晓蓝/包容、科技、普惠 */
:root {
  --sscd-blue-1: #e6f4ff;
  --sscd-blue-2: #bae0ff;
  --sscd-blue-3: #91caff;
  --sscd-blue-4: #69b1ff;
  --sscd-blue-5: #4096ff;
  --sscd-blue-6: #1677ff;
  --sscd-blue-7: #0958d9;
  --sscd-blue-8: #003eb3;
  --sscd-blue-9: #002c8c;
  --sscd-blue-10: #001d66;
}

/** 极客蓝/探索、钻研 */
:root {
  --sscd-geekblue-1: #f0f5ff;
  --sscd-geekblue-2: #d6e4ff;
  --sscd-geekblue-3: #adc6ff;
  --sscd-geekblue-4: #85a5ff;
  --sscd-geekblue-5: #597ef7;
  --sscd-geekblue-6: #2f54eb;
  --sscd-geekblue-7: #1d39c4;
  --sscd-geekblue-8: #10239e;
  --sscd-geekblue-9: #061178;
  --sscd-geekblue-10: #030852;
}

/** 酱紫/优雅、浪漫 */
:root {
  --sscd-purple-1: #f9f0ff;
  --sscd-purple-2: #efdbff;
  --sscd-purple-3: #d3adf7;
  --sscd-purple-4: #b37feb;
  --sscd-purple-5: #9254de;
  --sscd-purple-6: #722ed1;
  --sscd-purple-7: #531dab;
  --sscd-purple-8: #391085;
  --sscd-purple-9: #22075e;
  --sscd-purple-10: #120338;
}

/** 法式洋红/明快、感性 */
:root {
  --sscd-magenta-1: #fff0f6;
  --sscd-magenta-2: #ffd6e7;
  --sscd-magenta-3: #ffadd2;
  --sscd-magenta-4: #ff85c0;
  --sscd-magenta-5: #f759ab;
  --sscd-magenta-6: #eb2f96;
  --sscd-magenta-7: #c41d7f;
  --sscd-magenta-8: #9e1068;
  --sscd-magenta-9: #780650;
  --sscd-magenta-10: #520339;
}

/** 中性色 */
:root {
  --sscd-gray-1: #ffffff;
  --sscd-gray-2: #fafafa;
  --sscd-gray-3: #f5f5f5;
  --sscd-gray-4: #e9e9e9;
  --sscd-gray-5: #d9d9d9;
  --sscd-gray-6: #bfbfbf;
  --sscd-gray-7: #8c8c8c;
  --sscd-gray-8: #595959;
  --sscd-gray-9: #262626;
  --sscd-gray-10: #000000;
}
    </pre>
  </div>
</template>

<style type="less" scoped>
  .pc {
    width: 988px;
    margin: auto;
    padding-bottom: 36px;
    .blue {
      color: #1677FF;
      cursor: pointer;
    }
  }
</style>
